<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>

    <style>
        /* 这是通配符选择器，可以选中页面的所有元素 */
        * {
            /* 消除浏览器的默认样式 */
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            width: 600px;
            margin: 0 auto;
        }

        h1 {
            text-align: center;
            margin: 20px auto;
        }

        p {
            text-align: center;
            color: #666;
            margin: 20px auto;
        }

        .row {
            /* 开启弹性布局 */
            display: flex;
            height: 40px;
            /* 水平方向居中 */
            justify-content: center;
            /* 垂直方向居中 */
            align-items: center;
        }

        .row span {
            width: 80px;
        }

        .row input {
            width: 200px;
            height: 30px;
        }

        .row button {
            width: 280px;
            height: 30px;
            color: white;
            background-color: orange;
            border: none;
        }

        .row button:active {
            background-color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入后点击提交，会将信息显示到表格中</p>
        <div class="row">
            <span>谁：</span>
            <input type="text">
        </div>

        <div class="row">
            <span>对谁：</span>
            <input type="text">
        </div>

        <div class="row">
            <span>说：</span>
            <input type="text">
        </div>
        
        <div class="row">
            <button>提交</button>
        </div>
        
    </div>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

    <script>
        // 先选中三个输入框和一个按钮
        let inputs = document.querySelectorAll('input');
        let containerDiv = document.querySelector('.container');
        let button = document.querySelector('button');
        button.onclick = function() {
            // 1.获取到三个输入框的内容
            let from = inputs[0].value; // 表示是谁说的
            let to = inputs[1].value;   // 表示对谁说的
            let message = inputs[2].value; // 表示说的是什么
            if (from == '' || to == '' || message == '') {
                return;
            }
            // 2.构造一个新 div 
            let rowDiv = document.createElement('div');
            rowDiv.className = 'row'; // 有了一个 row 的属性
            rowDiv.innerHTML = from + ' 对 ' + to + ' 说: ' + message;
            containerDiv.appendChild(rowDiv); 
            // 3.清楚之前输入框里的内容
            for (let input of inputs) {
                input.value = '';
            }

            // [新增]4. 使用 ajax 构造一个 post 请求， 把上述数据提交到服务器里
            // 构造一个 body
            let body = {
                "from": from,
                "to": to,
                "message": message
            }

            // 将 js 对象转为 json 格式的字符串
            let strBody = JSON.stringify(body);
            // 打印日志
            console.log("strBody:" + strBody);
            $.ajax({
                // 这里是要构造的请求类型
                type: 'post',
                // 这里的路径要和之前约定好的前后端交互接口一致
                url: 'message',
                // post 请求是有 body 的，所以就要设置一个 body
                data: strBody,
                // 指定 body 的具体格式
                contentType: "application/json; charset = utf-8",
                success: function(body) {
                    console.log("数据发布成功！")
                }
            });
        }

        // [新增] 在页面加载的时候，发送 GET 请求，从服务器获取数据并添加到页面中
        $.ajax({
            type: 'get',
            url: 'message',
            success: function(body) {
                // 这里的 body 已经是一个 js 的对象数组了 
                // 本来服务器返回的是一个 json 格式的字符串，但是 jQuery 的 ajax 自动识别并转化了
                // 接下来遍历这个数据，把元素取出来构造页面中即可
                for(let message of body) {
                    // 针对每一个元素构造一个 div
                    let rowDiv = document.createElement('div');
                    rowDiv.className = 'row'; // 有了一个 row 的属性
                    rowDiv.innerHTML = message.from + ' 对 ' + message.to + ' 说: ' + message.message;
                    containerDiv.appendChild(rowDiv); 
                }
            }
        });

    </script>
</body>
</html>